<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天气案例小练习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<h1>今日天气是：{{ isHot ? '炎热' : '凉爽' }}</h1>
			<button type="button" @click="isHot = !isHot">切换天气</button>
			
			<h1>计算属性-今日天气是：{{ weather }}</h1>
			<button type="button" @click="isHot = !isHot">切换天气</button>
			
			<h1>监视属性-今日天气是：{{ weatherList[weatherNum] }}</h1>
			<button type="button" @click="weatherNum++">切换天气</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#box',
				data:{
					isHot:true,
					weatherList:['晴天','小雨','中雨','大雨','晴转多云','大雪','多云'],
					weatherNum:0
				},
				//通过计算属性实现
				computed:{
					weather(){
						return this.isHot ? '炎热' : '凉爽';
					}
				},
				//监视属性 属性改变时触发
				watch:{
					isHot:{//被监视的属性
						handler(nv,ov){//nv新的值 ov改之前的值
							console.log("改之后的值",nv);
							console.log("改之前的值",ov)
						}
					},
					// weatherNum:{
					// 	handler(nv,ov){
					// 		if(nv == this.weatherList.length){
					// 			this.weatherNum = 0;
					// 		}
					// 	}
					// }
				}
			})
			
			//动态打开监视属性
			setTimeout(() =>{
				vm.$watch('weatherNum',{
					handler(nv,ov){
						if(nv >= this.weatherList.length){
							this.weatherNum = 0;
						}
					}
				})
			},5000);
			
		</script>
	</body>
</html>
